<script lang="ts" setup>
defineProps({
  id: {
    type: [Number, String],
    require: false,
    default: 111,
  }
})
import {ref, reactive, inject} from 'vue'

const user = reactive({id: 99, name: '李四', age: 18, address: '郑州'})
const emits = defineEmits(['a1', 'a2', 'a3'])
emits('a1', 123)
emits('a2', user)
emits('a3', [10, 20, 30, 40, 50, 60])
</script>

<template>
  <div class="bb">

    <p>App.vue user {{ inject('user') }}</p>

    <p v-for="item in inject('addr')">{{ item }}</p>

    <hr>
    <h4>子组件(bb.vue)</h4>
    <p>{{ id }}</p>
    <button @click.stop="user.id++">修改userid</button>
    {{ user }}
  </div>
</template>

<style scoped>
.bb {
  width: 250px;
  height: 180px;
  color: #fff;
  background-color: #48e114;
}
</style>
